<template>
  <div class="p-2">
    <CustomFilter :schemas="schemas" :inits="dftFilters" @submit="(params) => { filters = params; reload(); }" />
    <BasicTable @register="registerTable" @fetch-success="({ total }) => resTotal = total">
      <template #toolbar>
        <a-button :disabled="!perms.add" type="primary" @click="handleOpen({})">添加</a-button>
        <ExcelImport :disabled="!perms.import" :bean="bean" :title="name" :schemas="schemas" :cascades="inners" @reload="reload" />
        <ExcelExport :disabled="!perms.export" :bean="bean" :title="name" :columns="columns" :cascades="inners" :total="resTotal" :params="reqParams" />
      </template>
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'action'">
          <a-button @click="openDetail(record)" class="mr-1">详情</a-button>
          <a-button :disabled="!perms.edit" type="primary" @click="handleOpen(record)" class="mr-1">编辑</a-button>
          <ActionButtons :deleted="perms.delete" :record="record" :options="statusOpts" @click="toStatus" />
        </template>
      </template><!-- bodyCell -->
      <template #expandedRowRender="{ record }">
      </template><!-- expanded -->
    </BasicTable>
    <DetlModal :title="name" :schemas="forms" :cascades="inners" :buttons="statusOpts" @click="toStatus" @register="registerDetl" />
    <SaveModal :title="name" :schemas="forms" :cascades="inners" @save="toSave" @register="registerSave" />
  </div>
</template>
<script lang="ts" setup>
  import { ref, reactive } from 'vue'
  import { BasicTable, useTable } from '@/components/Table'
  import { CrudSchema, useCrud, Cascade } from '@/views/comp/CrudSchemas'
  import TableImg from '@/components/Table/src/components/TableImg.vue'
  import api, { ApiParams, getPerms, FxuFilter } from '@/api/service'
  import ExcelExport from '@/views/comp/ExcelExport.vue'
  import ExcelImport from '@/views/comp/ExcelImport.vue'
  import CustomFilter from '@/views/comp/CustomFilter.vue'
  import ActionButtons from '@/views/comp/ActionButtons.vue'
  import { DetlModal, useDtlModel } from '@/views/comp/detl'
  import { SaveModal, useSaveModel } from '@/views/comp/save'
  import FileUpload from '@/views/comp/upload/FileUpload.vue'
  // import { Tinymce } from '@/components/Tinymce/index'
  import {} from 'ant-design-vue'
  import {} from './data'

  // 默认搜索条件
  const dftFilters = ref<FxuFilter[]>([
    { field: '' }, { field: '' }, { field: '' },
  ]);

  // 自定义变量
  let filters = {}
  let resTotal = 0
  const name = '角色'
  const bean = 'sys.sysRole'
  const perms = getPerms('角色管理')
  const loading = ref(false)
  const reqParams = ref({})
  const apiParams: ApiParams = { showFlags: 'menuList[name]', params: {} }

  // 级联对象定义
  const inners = reactive<Cascade[]>([
  ]) // inners

  // 单表对象定义
  const schemas: CrudSchema[] = [
  ] // schemas

  // 对按钮权限控制
  const disBtns = [!perms.hide ? '隐藏' : '', !perms.show ? '显示' : '']
  // 获取表单表格状态
  const { forms, columns, statusOpts } = useCrud(schemas, disBtns)

  const [registerSave, { openSave, closeSave }] = useSaveModel()
  const [registerDetl, { openDetail, closeDetail }] = useDtlModel()
  const [registerTable, { reload }] = useTable({
    api: async (params) => {
      reqParams.value = api.getReqParams(apiParams, params, filters)
      return await api.pageBy(bean, reqParams.value, false)
    },
    ...api.getTableProps(name, columns, 270),
    loading: loading
  })

  function handleOpen(record: any) {
    openSave(record)
  }

  async function toStatus(record, status, name) {
    try {
      loading.value = true
      await api.saveBean(bean, { id: record.id, status })
      api.msg.success((name || '处理') + '成功')
      closeDetail()
      closeSave()
      reload()
    } finally {
      loading.value = false
    }
  }

  async function toSave({ isUpdate, values }) {
    try {
      await api.saveBean(bean, values)
      api.msg.success(isUpdate ? '编辑成功' : '创建成功')
      closeSave()
      reload()
    } catch (e) {
      closeSave(true)
    }
  }
</script>
